﻿@page "/"

@inherits BaseComponent
@layout HomeLayout
@inject AppService AppService
@inject IOptions<SiteOption> SiteOption

<PageTitle>@SiteOption.Value.AppTitle</PageTitle>

<div class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-3 bg-primary position-relative">
    <div class="container text-white h-100">
        <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
            <div class="col pt-4 pb-4">
                <h2 class="display-4" style="font-weight:500;margin-bottom:2rem;">文章启智，工具助力</h2>
                <h5 class="font-weight-light" style="margin-bottom:10px;"><strong>码界工坊</strong>：使用<strong>.NET 9 Web API</strong> + <strong>Blazor</strong>开发。</h5>
                <h5 class="font-weight-light" style="margin-bottom:1.5rem;">有技术文章、开源项目介绍和在线工具，助力高效编程。</h5>
                <a href="https://github.com/dotnet9/codewf" class="btn btn-lg btn-outline-white btn-round">本站源码</a>
            </div>
            <div class="col align-self-bottom align-items-right text-right h-max-380 position-relative z-index-1">
                <img src="https://img1.dotnet9.com/site/banners/resource.png" class="rounded img-fluid">
            </div>
        </div>
    </div>
</div>
<svg style="-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg);margin-top:-1px;enable-background:new 0 0 1440 126;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1440 126" xml:space="preserve">
    <path class="bg-primary" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"/>
</svg>

<div class="container pt-5 pb-5" data-aos="fade-up">
    <div class="row gap-y">
        @if (_posts?.Any() != true)
        {
            <AntEmpty/>
        }
        else
        {
            foreach (var blogPost in _posts)
            {
                <div class="col-md-6 col-xl-4">
                    <MediaBox Style="text-salmon" Icon="fab fa-slack-hash" Title="@blogPost.Title" Link="@ConstantUtil.GetBbsPostUrl(blogPost)">
                        @blogPost.Description
                    </MediaBox>
                </div>
            }
        }
    </div>
</div>

<script>
	jQuery(document).ready(function() {
		$(window).scroll(function() {
			$('.index-nav').toggleClass('@SiteHeader.DarkNavClass', $(this).scrollTop() > 50);
		});
	});
</script>

@code
{

    private List<BlogPost>? _posts;

    protected override async Task OnInitAsync()
    {
        await base.OnInitAsync();
        _posts = await AppService.GetBannerPostAsync();
    }
}
